<template>
  <div>
    <el-card shadow="never"
             header="出行费用"
             body-style="padding: 22px 22px 0 22px;">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form ref="form"
                   :model="form"
                   label-width="180px"
                   style="max-width: 650px; padding: 34px 20px 0 20px"
                   @keyup.enter.native="save"
                   @submit.native.prevent>
            <el-form-item label="允许类型:"
                          prop="allowType">
              <el-radio v-model="form.allowSize"
                        label="1">无费用</el-radio>
              <el-radio v-model="form.allowSize"
                        label="2">固定费用</el-radio>
              <el-radio v-model="form.allowSize"
                        label="3">公里计算</el-radio>
            </el-form-item>
            <el-form-item label="技师出行费用:"
                          prop="allowSize">
              <el-input show-password
                        v-model="form.allowSize"
                        placeholder="请输入技师出行费用"
                        clearable />
              <span class="prompt">选择固定费用后，用户下单不管距离是否远近，技师出行费用固定不变</span>
            </el-form-item>
            <el-form-item label="起步价:"
                          prop="allowSize">
              <el-input show-password
                        v-model="form.allowSize"
                        placeholder="请输入技师起步价"
                        clearable />
              <div @click="addCostRange">
                <span style="color: #1890FF;">+ 添加公里出行的费用区间</span>
              </div>
              <div style="margin-bottom: 10px;">
                <el-tag>2-8(公里)</el-tag>
                <el-tag>2-14(公里)</el-tag>
              </div>
              <el-input style="margin-bottom: 10px;"
                        placeholder="请输入内容"
                        type="number"
                        v-model="form.allowSize">
                <template slot="append">元</template>
              </el-input>
              <tinymce-editor v-model="content"
                              :init="{ height: 525 }" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary"
                         :loading="loading"
                         @click="save">
                保存更改
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <drawerEdit :drawerEditBoolen.sync="drawerEditBoolen"></drawerEdit>
  </div>
</template>
<script>
import TinymceEditor from '@/components/TinymceEditor/index.vue';
import drawerEdit from './drawerEdit.vue'
export default {
  name: "index",
  props: {
    tabSwitch: String
  },
  components: { drawerEdit, TinymceEditor },
  data () {
    return {
      loading: false,
      // tab页选中
      active: 'info',
      form: {
        // 允许类型
        allowType: '',
        // 允许大小
        allowSize: '0',
        // 存储方式
        storageMode: ''
      },
      drawerEditBoolen: false
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {

  },
  methods: {
    init () {

    },
    addCostRange () {
      this.drawerEditBoolen = !this.drawerEditBoolen
    },
    save () { }

  },

}
		</script>
<style lang="less" scoped>
.prompt {
  color: #999;
  font-size: 12px;
}
</style>